<template>
  <div class="card time-filter">
    <div class="card-title">
      <el-icon><timer /></el-icon>
      时间筛选
    </div>

    <div class="filter-controls">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="filter-item">
            <span class="filter-label">开始时间:</span>
            <el-input-number
                v-model="startTime"
                :min="minTime"
                :max="maxTime"
                :step="0.0001"
                :precision="4"
                controls-position="right"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="filter-item">
            <span class="filter-label">结束时间:</span>
            <el-input-number
                v-model="endTime"
                :min="minTime"
                :max="maxTime"
                :step="0.0001"
                :precision="4"
                controls-position="right"
            />
          </div>
        </el-col>
      </el-row>

      <div class="slider-container">
        <el-slider
            v-model="timeRange"
            range
            :min="minTime"
            :max="maxTime"
            :step="0.0001"
            :format-tooltip="formatTimeTooltip"
            @change="handleSliderChange"
        />
      </div>

      <div class="filter-info">
        <el-alert
            v-if="startTime > endTime"
            title="注意：开始时间大于结束时间，将显示从开始时间起的10000条数据"
            type="warning"
            :closable="false"
            show-icon
        />
        <el-tag :type="startTime > endTime ? 'warning' : 'success'">
          时间范围: {{ startTime.toFixed(4) }}s - {{ endTime.toFixed(4) }}s
        </el-tag>
      </div>

      <div class="filter-actions">
        <el-button
            type="primary"
            :icon="Timer"
            @click="applyFilter"
        >
          应用筛选
        </el-button>
        <el-button
            type="info"
            :icon="Refresh"
            @click="resetFilter"
        >
          重置筛选
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Timer, Refresh } from '@element-plus/icons-vue'

const props = defineProps({
  signals: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['filter'])

// 时间范围状态
const minTime = ref(0)
const maxTime = ref(0)
const startTime = ref(0)
const endTime = ref(0)

// 计算时间范围滑块值
const timeRange = computed({
  get: () => [startTime.value, endTime.value],
  set: (val) => {
    startTime.value = val[0]
    endTime.value = val[1]
  }
})

onMounted(() => {
  // 正确计算时间范围：使用第一个和最后一个时间点
  minTime.value = props.signals[0]?.time || 0
  maxTime.value = props.signals[props.signals.length - 1]?.time || 0

  // 设置初始值
  startTime.value = minTime.value
  endTime.value = maxTime.value
})

// 格式化滑块提示
const formatTimeTooltip = (value) => {
  return value.toFixed(4) + 's'
}

// 滑块变化处理
const handleSliderChange = (val) => {
  startTime.value = val[0]
  endTime.value = val[1]
}

// 应用筛选
const applyFilter = () => {
  emit('filter', {
    startTime: startTime.value,
    endTime: endTime.value
  })
}

// 重置筛选
const resetFilter = () => {
  startTime.value = minTime.value
  endTime.value = maxTime.value
  emit('filter', {
    startTime: minTime.value,
    endTime: maxTime.value
  })
}
</script>

<style scoped>
.time-filter {
  margin-bottom: 20px;
}

.filter-controls {
  padding: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.filter-label {
  width: 80px;
  color: #a0b0ff;
  font-size: 0.9rem;
}

.slider-container {
  margin: 25px 0;
}

.filter-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.filter-info {
  text-align: center;
  margin: 15px 0;
}

.el-tag {
  font-size: 0.95rem;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.el-alert {
  margin-bottom: 15px;
}
</style>